<template>
  <div class="auth-container">
    <div class="auth-box">
      <div class="auth-header">
        <h1>{{ isLogin ? '用户登录' : '用户注册' }}</h1>
        <p>{{ isLogin ? '欢迎回来，请登录您的账户' : '创建新账户加入我们' }}</p>
      </div>
      
      <form @submit.prevent="handleSubmit" class="auth-form">
        <!-- 用户名输入 -->
        <div class="form-group">
          <label for="username">用户名</label>
          <input 
            type="text" 
            id="username" 
            v-model="form.username" 
            :placeholder="isLogin ? '请输入用户名或邮箱' : '请输入用户名'"
            required
          />
        </div>
        
        <!-- 邮箱输入（仅注册时显示） -->
        <div class="form-group" v-if="!isLogin">
          <label for="email">邮箱</label>
          <input 
            type="email" 
            id="email" 
            v-model="form.email" 
            placeholder="请输入邮箱"
            required
          />
        </div>
        
        <!-- 密码输入 -->
        <div class="form-group">
          <label for="password">密码</label>
          <input 
            type="password" 
            id="password" 
            v-model="form.password" 
            placeholder="请输入密码"
            required
          />
        </div>
        
        <!-- 确认密码输入（仅注册时显示） -->
        <div class="form-group" v-if="!isLogin">
          <label for="confirmPassword">确认密码</label>
          <input 
            type="password" 
            id="confirmPassword" 
            v-model="form.confirmPassword" 
            placeholder="请再次输入密码"
            required
          />
        </div>
        
        <!-- 会员选项（仅注册时显示） -->
        <div class="form-group" v-if="!isLogin">
          <label class="checkbox-label">
            <input
              id="isMember"
              v-model="form.isMember"
              type="checkbox"
            />
            <span>注册为会员用户（享受更多特权）</span>
          </label>
        </div>
        
        <!-- 错误信息显示 -->
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>
        
        <!-- 提交按钮 -->
        <button type="submit" class="submit-btn" :disabled="loading">
          {{ loading ? '处理中...' : (isLogin ? '登录' : '注册') }}
        </button>
      </form>
      
      <!-- 切换登录/注册 -->
      <div class="auth-toggle">
        <p>
          {{ isLogin ? '还没有账户？' : '已有账户？' }}
          <span @click="toggleAuthMode" class="toggle-link">
            {{ isLogin ? '立即注册' : '立即登录' }}
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { userStore } from '../stores/user.js'

export default {
  name: 'AuthView',
  setup() {
    const router = useRouter()
    
    // 响应式数据
    const isLogin = ref(true)
    const loading = ref(false)
    const errorMessage = ref('')
    
    const form = reactive({
      username: '',
      email: '',
      password: '',
      confirmPassword: '',
      isMember: false
    })
    
    // 切换登录/注册模式
    const toggleAuthMode = () => {
      isLogin.value = !isLogin.value
      errorMessage.value = ''
      // 清空表单
      form.username = ''
      form.email = ''
      form.password = ''
      form.confirmPassword = ''
    }
    
    // 处理表单提交
    const handleSubmit = () => {
      errorMessage.value = ''
      
      // 表单验证
      if (!form.username || !form.password) {
        errorMessage.value = '请填写所有必填字段'
        return
      }
      
      // 注册时验证密码一致性
      if (!isLogin.value) {
        if (!form.email) {
          errorMessage.value = '请输入邮箱'
          return
        }
        
        if (form.password !== form.confirmPassword) {
          errorMessage.value = '两次输入的密码不一致'
          return
        }
        
        if (form.password.length < 6) {
          errorMessage.value = '密码长度至少6位'
          return
        }
      }
      
      loading.value = true
      
      // 模拟异步操作
      setTimeout(() => {
        try {
          if (isLogin.value) {
            // 登录逻辑
            const result = userStore.login(form.username, form.password)
            if (result.success) {
              // 登录成功，跳转到首页
              router.push('/')
            } else {
              errorMessage.value = result.message
            }
          } else {
            // 注册逻辑
            const result = userStore.register(form.username, form.email, form.password, form.isMember)
            if (result.success) {
              // 注册成功，跳转到首页
              router.push('/')
            } else {
              errorMessage.value = result.message
            }
          }
        } catch (error) {
          errorMessage.value = '操作失败，请稍后重试'
        } finally {
          loading.value = false
        }
      }, 1000)
    }
    
    return {
      isLogin,
      loading,
      errorMessage,
      form,
      toggleAuthMode,
      handleSubmit
    }
  }
}
</script>

<style scoped>
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 60px);
  padding: 2rem;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.auth-box {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 2.5rem;
  width: 100%;
  max-width: 450px;
}

.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-header h1 {
  color: #333;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.auth-header p {
  color: #666;
  font-size: 1rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  color: #333;
  font-weight: 500;
}

.form-group input {
  padding: 0.8rem 1rem;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: #ff9a9e;
}

.error-message {
  color: #f86d75;
  background-color: #fff5f5;
  padding: 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
}

.submit-btn {
  background-color: #ff9a9e;
  color: #fff;
  border: none;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:hover:not(:disabled) {
  background-color: #f86d75;
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.auth-toggle {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e1e5e9;
}

.toggle-link {
  color: #ff9a9e;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease;
}

.toggle-link:hover {
  color: #f86d75;
  text-decoration: underline;
}

/* 会员选项样式 */
.form-group input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  color: #666;
}

.checkbox-label span {
  user-select: none;
}

@media (max-width: 768px) {
  .auth-container {
    padding: 1rem;
  }
  
  .auth-box {
    padding: 1.5rem;
  }
  
  .auth-header h1 {
    font-size: 1.5rem;
  }
}
</style>